import "./index.css";
import CssModuleDemo from "./moduleCss/index";
import CssInJsDemo from "./cssInjsDemo/index";
export default function CssDemo() {
  return (
    <div className=" flex justify-center items-center bg-gradient-to-r from-pink-500 to-purple-300 w-full h-full text-center text-4xl font-bold">
      <div className="text-c pr-4 hover:ianimate-spn">
        <span>前端辣么菜</span>
        <span className="box box2 border1">我是谁</span>
        <CssModuleDemo></CssModuleDemo>
        {/* <!-- 焦点状态 --> */}
        <input
          placeholder="输入"
          className="border border-gray-300 focus:border-blue-500 focus:outline-none"
        />

        <hr />
        <CssInJsDemo></CssInJsDemo>
      </div>
    </div>
  );
}
